import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    ScrollView,
    Text,
    TouchableOpacity,
    Dimensions,
} from 'react-native'
import ThreeLabelBar from '../../components/styleCompoent/ThreeLabelBar'
import AlarmLabelBar from '../../components/styleCompoent/AlarmLabelBar'
import NavigationBar from '../../components/common/NavigationBar'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
class TempAndWetSensor extends Component {
  constructor(props) {
    super(props)

    this.state={
      Show: false,
    }
  }

  render() {
    return (
      <View style = {styles.container}>
          <NavigationBar
            title={'温湿度传感器'}
            statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
            style={{backgroundColor: '#F4F4F4'}}
            navigator={this.props.navigator}
          />
          <ScrollView >
            <View style = {{ justifyContent: 'center', alignItems: 'center' }}>
                <ThreeLabelBar
                    barWidth={width-30}
                    barHeight={224}
                    containerStyle={{marginTop: 15}}
                    firstLineTitle={'当前温度'}
                    secondLineTitle={'当前湿度'}
                    thirdLineTitle={'PM2.5'}
                    firstLineValue={'22'}
                    secondLineValue={'56'}
                    thirdLineValue={'666'}
                />
                <AlarmLabelBar
                    barWidth={width-30}
                    barHeight={68}
                    containerStyle={{marginTop: 15}}
                    title={'剩余电量低于20%，请尽快充电！'}
                />
            </View>
          </ScrollView>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
})

export default TempAndWetSensor
